<template>
  <el-sub-menu :index="menu.path">
    <template #title>{{ menu.label }}</template>
    <template v-for="item in menu.children" :key="item.path">
      <el-menu-item :index="item.path" v-if="!item.children">{{ item.label }}</el-menu-item>
      <SubMenuItem v-else :menu="item" />
    </template>
  </el-sub-menu>
</template>

<!-- <script lang="ts">
  export default {
    menu: 'SubMenuItem',
  };
</script> -->

<script setup lang="ts">
  import { toRefs } from 'vue';
  import { MenuItem } from '@/menus/index';

  const props = defineProps({
    menu: {
      type: Object,
      default: (): MenuItem => ({ path: '/', label: '首页' }),
    },
  });

  const { menu } = toRefs(props);
</script>
